<template>
  <div>
    <!-- PC端 -->
    <div class="topbar">
      <div class="topbar-left">
        <div class="lyear-aside-toggler">
          <el-icon @click="handleChangeCollapse" v-if="isCollapse">
            <Expand/>
          </el-icon>
          <el-icon @click="handleChangeCollapse" v-else>
            <Fold/>
          </el-icon>
        </div>
        <span class="navbar-page-title">{{ $route.meta.title }}</span>
      </div>
      <div>退出</div>
    </div>
    <!-- 移动端 -->
    <div class="topbar-mobile">
      <div class="topbar-left">
        <div class="lyear-aside-toggler" @click="drawer=!drawer">
          <el-icon>
            <Expand/>
          </el-icon>
        </div>
        <!-- 抽屉 -->
        <el-drawer
            modal-class="drawer"
            v-model="drawer"
            direction="ltr"
            title="I am the title"
            :with-header="false"
            size="auto"
        >
          <HomeAside></HomeAside>
        </el-drawer>
        <span class="navbar-page-title">{{ $route.meta.title }}</span>
      </div>
      <div>退出</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {computed, ref, watch} from 'vue';
import {useStore} from 'vuex';
import {Expand, Fold} from '@element-plus/icons-vue';
import HomeAside from './HomeAside.vue';
import {useRoute} from "vue-router";

const store = useStore();
const route = useRoute()

/**
 * 是否折叠
 */
const isCollapse = computed(() => {
  return store.state.isCollapse;
});
/**
 * 修改折叠状态
 */
const handleChangeCollapse = () => {
  store.commit('changeIsCollapse');
};


/**
 * 抽屉
 */
const drawer = ref(false);
watch(() => route.fullPath, (value, oldValue, onCleanup) => {
  if (value !== oldValue) {
    drawer.value = false
  }
})
</script>

<style scoped lang="less">
/* PC端 */
.topbar {
  display: -webkit-box;
  display: flex; /* 添加标准 flex 显示 */
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
  min-height: 64px;
  padding: 0 15px;

  .topbar-left {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;

    .lyear-aside-toggler {
      font-size: 30px;
      cursor: pointer;
    }

    .navbar-page-title {
      display: inline-block;
      margin-right: 20px;
      padding-top: 20px;
      padding-bottom: 24px;
      font-size: 16px;
    }
  }
}


/* 移动端 */
.topbar-mobile {

  display: none !important; /* 添加标准 flex 显示 */

  .topbar-left {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;

    .lyear-aside-toggler {
      font-size: 30px;
      cursor: pointer;
    }

    .navbar-page-title {
      display: inline-block;
      margin-right: 20px;
      padding-top: 20px;
      padding-bottom: 24px;
      font-size: 16px;
    }
  }
}

/* 覆盖 el-drawer 内边距 */
::v-deep .el-drawer__body {
  padding: 0 !important;
}

/* 媒体查询 */
@media (max-width: 786px) {
  /* PC端隐藏 */
  .topbar {
    display: none !important;
  }


  /* 移动端展示 */
  .topbar-mobile {
    display: -webkit-box;
    display: flex !important;
    -webkit-box-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    align-items: center;
    min-height: 64px;
    padding: 0 15px;

  }
}
</style>

